<template>
  <div class="com-container" >
    <div class="com-chart" id="map"></div>
  </div>
</template>

<script setup>
import { onMounted,onBeforeUnmount, inject, reactive, ref, watch} from "vue";
import { getMapData, getChinaData, getClickData } from "@/service/getChartsData";
import { getProvinceMapInfo } from '@/utils/map_utils.js'
import {useStore} from "vuex";


// 1. 接收Echarts
let echarts = inject('echarts')
let chartInstance = reactive({})
// 2. 定义接收数据变量
let chartData = reactive([])
let legendData = reactive([])
let legendArr = reactive([])
let seriesArr = reactive([])
let titleFontSize = ref(null)
const store = useStore()

async function getChartData() {
  let {data: res} = await getChinaData()
  let {data: red} = await getMapData()
  chartData = res
  legendData = red
}

function initChart() {
  chartInstance = echarts.init(document.querySelector("#map"), store.state.theme)
  
  echarts.registerMap('china', chartData)

  const initOption = {
    title: {
      text: "▎ 商家分布",
      left: 20,
      top: 20
    },
    // 地图的数据配置
    geo:{
      type:'map',
      map:'china',
      top: '5%',
      bottom: '5%',
      // 地图样式
      itemStyle: {
        // 区域颜色
        areaColor: '#2E72BF',
        // 边框颜色
        borderColor: '#333'
      }
    },
    legend: {
      left: '5%',
      bottom: '5%',
      orient: 'vertical'//设置图例摆放方式，'vertical'为垂直摆放
    }
  }
  chartInstance.setOption(initOption)

  // 给地图添加点击转到省份地图事件
  chartInstance.on('click', async target => {
    let {key, path} = getProvinceMapInfo(target.name)

    if(!chartData[key] ) {
       let {data: res} = await getClickData(path)
       chartData[key] = res
       echarts.registerMap(chartData[key], res)
    }
    const changeOption = {
      geo:{
        type:'map',
        map:chartData[key]
      }
    }
    chartInstance.setOption(changeOption)
  })

  // 双击省份返回中国地图
  chartInstance.on('dblclick', () => {
    const revertOption = {
      geo:{
        map:'china'
      }
    }
    chartInstance.setOption(revertOption)
  })
}

// 双击页面返回中国地图
// function revertMap() {
//     const revertOption = {
//       geo:{
//         map:'china'
//       }
//     }
//    chartInstance.setOption(revertOption)
// }


function setChartData(){
  // 分离图例数据
  legendArr = legendData.map( item => item.name)
  // 分离散点数据
  seriesArr = legendData.map( item => {
    return {
      type:'effectScatter',// 散点类型
      // 散点涟漪效果
      rippleEffect: {
        scale: 5, //涟漪程度
        brushType: 'stroke' // 涟漪类型，'stroke'为空心类型
      },
      name: item.name,// 散点类别名称
      data: item.children,// 散点坐标数据
      coordinateSystem: 'geo' //此配置为，使用地图的坐标系统，
    }

  })

}

function updateChart() {
  setChartData()
  const updateOption = {
    // 图例配置
    legend:{
      data: legendArr
    },
    // 散点配置
    series: seriesArr
  }
  chartInstance.setOption(updateOption)
}

function screenAdapter() {
  titleFontSize.value = document.querySelector("#map").offsetWidth / 100 * 3.6

  const adapterOption = {
    title: {
      textStyle: {
        fontSize: titleFontSize.value
      }
    },
    legend: {
      itemWidth: titleFontSize.value / 2,
      itemHeight: titleFontSize.value / 2,
      itemGap: titleFontSize.value / 2,
      textStyle: {
        fontSize: titleFontSize.value / 2
      }
    }
  }
  chartInstance.setOption(adapterOption)
  chartInstance.resize()
}

watch(() => store.state.theme, () => {
  //console.log('主题切换了')
  chartInstance.dispose()//销毁当前的图表
  initChart()//重新初始化图表对象
  updateChart()//更新图表的展示
  screenAdapter()//完成屏幕的适配
})

onMounted(() => {
   getChartData().then(() => {
     initChart()
     updateChart()
     screenAdapter()
   })
  window.addEventListener('resize',screenAdapter)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize',screenAdapter)

})

// 导出 适配函数 以便父组件screenPage使用
defineExpose ({
  screenAdapter
})

</script>

<style scoped lang="less">


</style>